<template>
	<view class="my-account">
		<view class="header">
			<view class="header-content">
				<image src="/static/my-wish-bg.png" mode="aspectFill" class="header-bg"></image>
				<view class="my-coin">
					<text class="iconfont icon-heart"></text>
					<text class="coin-value">{{coinNum}}</text>
				</view>
				<button class="use-btn" @click="goExchange">去使用</button>
			</view>
		</view>
		<view class="h20"></view>
		<list-cell title="心愿值是什么" class="list-cell" @eventClick="goExplain"></list-cell>
		<list-cell title="心愿值的用处" class="list-cell" @eventClick="goExplain"></list-cell>
		<list-cell title="查看明细" class="list-cell" @eventClick="goDetail"></list-cell>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import ListCell from '@/components/mix-list-cell.vue';
	export default {
		components:{ListCell},
		computed:{
			...mapGetters([
				'coinNum'
			])
		},
		data() {
			return {
				
			}
		},
		methods:{
			goExchange(){
				uni.switchTab({
					url:'/pages/exchange/exchange'
				})
			},
			goDetail(){
				uni.navigateTo({
					url:'/pages/my/account-detail'
				})
			},
			goExplain(){
				uni.navigateTo({
					url:'/pages/my/explain'
				})
			}
		}
	}
</script>

<style lang="scss">
.h20{
	height: 20rpx;
	background-color: #F6F6F6;
}
.header{
	padding: 31rpx 36rpx 40rpx;
}
.header-bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}
.header-content{
	position: relative;
	height: 260rpx;
	padding: 45rpx 0 0 60rpx;
	background:rgba(26,55,73,1);
	border-radius:30rpx;
}
.my-coin{
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	z-index: 2;
	.icon-heart{
		font-size: 40rpx;
		margin-right: 10rpx;
	}
}
.coin-value{
	font-size: 64rpx;
	color: #fff;
}
.use-btn{
	position: relative;
	width:180rpx;
	height:60rpx;
	margin-left: 0;
	line-height: 60rpx;
	font-size: 32rpx;
	color: #fff;
	background-color: #E7404A;
	border-radius:35rpx;
	z-index: 2;
}
</style>
